<!DOCTYPE html>
<html style="height: 90%; width: 100%" xmlns:th="http://www.thymeleaf.org" xmlns:tiles="http://www.thymeleaf.org">
<head>
	<meta charset="utf-8">
	<!-- layui -->
	<link type="text/css" rel="stylesheet" th:href="@{/plug/layui/css/layui.css}"  media="all"/>
	<script type="text/javascript" th:src="@{/plug/layui/layui.js}"  charset="utf-8"></script>
</head>
<body style="height: 90%;width: 100%; margin: 0">
<script type="text/javascript" th:src="@{/js/jquery/jquery-3.3.1.js}"></script>
<script type="text/javascript" th:src="@{/js/echarts/echarts.js}"></script>
<script type="text/javascript" th:src="@{/js/echarts/china.js}"></script>
<div id="container" style="height: 90%;width: 100%"></div>
</body>
</html>

<script type="text/javascript" th:inline="javascript">
	$(function() {
		var dom = document.getElementById("container");
		var myChart = echarts.init(dom);
		var app = {};
		option = null;
		var color = ['#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae', '#749f83', '#ca8622', '#bda29a', '#6e7074', '#546570', '#c4ccd3'];
		option = {
			title: {
				text: '',
				left: 'center'
			},
			tooltip: {
				trigger: 'axis',
				padding: [2, 10],
				textStyle: {
					fontSize: 16
				}
			},
			xAxis: {
				type: 'category',
				splitLine: {
					show: false
				},
				axisLine: {
					lineStyle: {
						width: 3
					}
				},
				axisTick: {
					show: true,
					alignWithLabel: true,
					lineStyle: {
						width:3
					}
				},
				axisLabel: {
					rotate: 45,
					fontWeight: "bold",
					formatter: function(value) {
						return value.split(" ")[1];
					}
				},
				data: ["2017-09-11 16:23:34", "2017-09-11 16:28:34", "2017-09-11 16:33:34", "2017-09-11 16:38:34", "2017-09-11 16:43:34", "2017-09-11 16:48:34", "2017-09-11 16:53:34"]
			},
			grid: {
				left: '2%',
				right: '4%',
				bottom: '4%',
				containLabel: true
			},
			visualMap: [{

				show: false,
				pieces: [{
					gt: 0,
					lte: 100,
					color: 'red'
				}, {
					gt: 100,
					color: 'blue'
				}],
				seriesIndex: 1
			},{
				show: false,
				pieces: [{
					gt: 0,
					lte: 80,
					color: 'yellow'
				}, {
					gt: 80,
					color: 'blue'
				}],
				seriesIndex: 0}],
			yAxis: {
				type: 'value',
				name: 'M',
				splitLine: {
					show: false
				},
				axisLine: {
					lineStyle: {
						width: 3,
						color: {
							type: 'linear',
							x: 0,
							y: 0,
							x2: 0,
							y2: 1,
							colorStops: [{
								offset: 0,
								color: 'red'
							}, {
								offset: 1,
								color: 'blue'
							}],
							globalCoord: false // 缺省为 false
						}
					}
				},
				axisTick: {
					lineStyle: {
						width: 3
					}
				},
				axisLabel: {
					fontWeight: "bold",
				}
			},
			series: [{
				type: 'line',
				symbol: 'circle',
				symbolSize: 10,
				smooth: true,
				animationDuration: 2000,
				itemStyle: {
					normal: {
						color: 'rgb(103, 99, 99)',
						shadowBlur: 2,
						shadowColor: "rgba(0, 0, 0, .12)",
						shadowOffsetX: 2,
						shadowOffsetY: 2
					}
				},
				lineStyle: {
					normal: {
						width: 3,
						shadowColor: 'rgba(0,0,0,0.4)',
						shadowBlur: 10,
						shadowOffsetX: 4,
						shadowOffsetY: 10
					}
				},
				data: [120, 90, 34, 65, 89, 201, 130],
				markLine: {
					silent: true,
					data: [{
						yAxis: 100
					}]
				},
				markPoint: {
					label: {
						normal: {
							show: true,
							align: 'center',
							color: 'WHITE',
							fontWeight: 100,
							formatter: '{b}'
						}
					},
					itemStyle: {
						normal: {
							color: {
								type: 'radial',
								x: 0.4,
								y: 0.4,
								r: 0.9,
								colorStops: [{
									offset: 0,
									color: '#51e0a2'
								}, {
									offset: 1,
									color: 'rgb(33,150,243)'
								}],
								globalCoord: false
							},
							shadowColor: 'rgba(0, 0, 0, 0.5)',
							shadowBlur: 10,
						}
					},
					data: [{
						name: '触发',
						value: 120,
						coord: [0, 120]
					}]
				}
			}, {
				type: 'line',
				symbol: 'circle',
				symbolSize: 10,
				smooth: true,
				animationDuration: 2000,
				itemStyle: {
					normal: {
						color: 'rgb(103, 99, 99)',
						shadowBlur: 2,
						shadowColor: "rgba(0, 0, 0, .12)",
						shadowOffsetX: 2,
						shadowOffsetY: 2
					}
				},
				lineStyle: {
					normal: {
						width: 3,
						shadowColor: 'rgba(0,0,0,0.4)',
						shadowBlur: 10,
						shadowOffsetX: 4,
						shadowOffsetY: 10
					}
				},
				data: [10, 40, 74, 83, 120, 146, 180]
			}, {
				type: 'line',
				symbol: 'circle',
				symbolSize: 10,
				smooth: true,
				animationDuration: 2000,
				itemStyle: {
					normal: {
						color: 'rgb(103, 99, 99)',
						shadowBlur: 2,
						shadowColor: "rgba(0, 0, 0, .12)",
						shadowOffsetX: 2,
						shadowOffsetY: 2
					}
				},
				lineStyle: {
					normal: {
						color: color[5],
						width: 3,
						shadowColor: 'rgba(0,0,0,0.4)',
						shadowBlur: 10,
						shadowOffsetX: 4,
						shadowOffsetY: 10
					}
				},
				data: [30, 25, 74, 143, 93, 100, 135]
			}]
		};
		if (option && typeof option === "object") {
			myChart.setOption(option, true);
		}
	});
</script>